<template>
    <div class="index-content">
        <div class="index-top">
            <div class="index-top-left">
                <div class="index-title">
                    <h1>徐州航务中心电子台账管理系统</h1>
                </div>
            </div>
            <div class="index-top-right">
                <div class="user-info">
                    <p>{{user_info.department_name}}</p>
                </div>
                <div class="btns">
                    <el-button    @click="updatePassword">修改密码</el-button>
                    <el-button   @click="exit">退出</el-button>
                </div>
            </div>
        </div>
        <div class="index-main">
            <div class="index-main-left">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item index="5" @click="toDepartments">
                    <i class="el-icon-user"></i>
                    <span slot="title">单位管理</span>
                </el-menu-item>
                <el-menu-item index="6" @click="toUsers">
                    <i class="el-icon-user"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                </el-menu>
            </div>
            <div class="index-show-content">
              <router-view class="main-page">
              </router-view>  
            </div>           
        </div>
    </div>
  </template>
  
  <script>
import { showLoading } from '../components/loading'

    export default{
        name: 'IndexAdmin',
        data(){
            return {
                user_info:{},
                sub_department:[]
            }
        },
  
        mounted(){
            this.user_info=this.$store.state.user_info
            if(!this.user_info){
                this.$router.push({path:'/login'})
            }
        },
        methods:{
            exit(){
                this.$router.push({path:'/login'})
            },
            toDepartments(){
                this.$router.push({path:'/index_admin/users'})
            },
            toUsers(){
                this.$router.push({path:'/index_admin/add_big_user'})
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            updatePassword(){
                this.$prompt('新密码', '请输入新密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                        this.$ajax({
                        method: 'post',
                        url: '/update_password',
                        data:{
                            "user_id":this.user_info._id,
                            "password":value
                        }
                    }).
                    then(res => {    
                        this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                    });  

                    // this.$ajax({
                    //     method: 'post',
                    //     url: '/update_password',
                    //     data:{
                    //     "user_id":this.this.user_info._id,
                    //     "password":value,
                    //     }
                    // }).
                    // then(res => {    
                    //     hideLoading()
                    //         this.$message({
                    //             message: '修改成功',
                    //             type: 'success'
                    //         });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });       
                });             
            }
        },
        
  
    }
  </script>
  
  
  <style>
    .index-content{
        background: rgb(235, 232, 232);  
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .index-top{
        width: 100%;
        height: 10vh;
        background: #1464bb;
        display: flex;
        flex-direction: row;
        padding-bottom: 1vh;
    }
    .index-top-left{
        width: 70%;
        /* border: 2px solid red; */
        color: white;
        text-align: center;
    }
    .index-title{
        padding-left: 2%;
        text-align: left;
        font-size: 1.2em;
    }
    .index-top-right{
        width: 20%;
        /* border: 2px solid rgb(26, 21, 100); */
        color: white;
        margin-left:12%;
        display: flex;
        flex-direction: column;
    }
    .user-info{
        width: 60%;
        margin-left: 20%;
        text-align: right;
    }
    .btns{
        width: 60%;
        margin-left: 40%;   
    }
    .user-info .btns .el-btn{

    }
    .user-info .btns .el-btn:hover{
        color: rgb(216, 215, 215);
    }
    .index-main{
        width: 100%;
        height: 89vh;
        background: rgb(235, 232, 232);  
        display: flex;
    }
    .index-main-left{
        width: 13%;
        height: 89vh;
        background: white       
    }
    .index-show-content{
        width: 86%;
        height: 89vh;
        background: rgb(235, 232, 232);  
    }
  </style>
  
  